{% extends ../base.html %}

{% block head %}
<style type="text/css">
	iframe {
		width: 100%;
		height: 50%;
	}
</style>
{% end %}

{% block body %}

<div class="col-md-12" style="padding-bottom: 30px; padding-top:30px;">
	<input id="mykey" class="col-md-6"></input>
	<button onclick="search()">搜索</button>
</div>

<div class="col-md-12">
	<div class="col-md-6">
		<iframe id="baidu" src="https://www.baidu.com"></iframe>
	</div>
	<div class="col-md-6">
		<iframe id="bing" src="http://cn.bing.com/"></iframe>
	</div>
<!-- 	<div class="col-md-4">
		<iframe id="google" src="https://www.google.com"></iframe>
	</div> -->
	<div class="col-md-6">
		<iframe id="sougou" src="https://www.sogou.com"></iframe>
	</div>
</div>

<script type="text/javascript">

$(function () {
	$("#mykey").keydown(function (e) {
		// console.log(e);
		if (e.keyCode == 13) {
			search();
		}
	});
});

function search() {
	var key = $("#mykey").val();
	console.log(key);
	$("#baidu").attr("src", "http://www.baidu.com/s?wd=" + key);
	$("#bing").attr("src", "http://cn.bing.com/search?q="+key);
	// $("#google").attr("src", "https://www.google.com/#q=" + key);
	$("#sougou").attr("src", "https://www.sogou.com/web?query=" + key);
}

</script>

{% end %}